<po-page>
  <!-- HEADER -->
  @if (hasPageHeader()) {
    <po-page-header [p-breadcrumb]="breadcrumb" [p-size]="componentsSize" [p-subtitle]="subtitle" [p-title]="title">
      <!-- OPERATIONS -->
      @if (hasAnyAction()) {
        <div class="po-page-header-actions">
          @if (hasEvent('back')) {
            <po-button
              [p-icon]="hasEditOrRemoveFn('icon')"
              [p-label]="literals.back"
              [p-kind]="hasEditOrRemoveFn('type')"
              [p-size]="componentsSize"
              (p-click)="back.emit()"
            >
            </po-button>
          }
          @if (hasEvent('remove')) {
            <po-button
              p-danger
              [p-icon]="hasEditFn('icon')"
              [p-label]="literals.remove"
              [p-kind]="hasEditFn('type')"
              [p-size]="componentsSize"
              (p-click)="remove.emit()"
            >
            </po-button>
          }
          @if (hasEvent('edit')) {
            <po-button
              p-icon="ICON_EDIT"
              p-kind="primary"
              [p-label]="literals.edit"
              [p-size]="componentsSize"
              (p-click)="edit.emit()"
            >
            </po-button>
          }
        </div>
      }
    </po-page-header>
  }

  <!-- CONTENT -->
  <po-page-content>
    <ng-content> </ng-content>
  </po-page-content>
</po-page>
